<template>
	<div>

		<div class="btn-wrap">
			<el-button type="primary" size="small" icon="el-icon-plus" @click="openDialog(false)">添加类别</el-button>
		</div>
		<el-table ref="table" v-loading="loading" :data="categories" row-key="id" lazy :load="loadChildren">
			<el-table-column prop="name" label="类别名称"></el-table-column>
			<el-table-column prop="goodsCount" label="商品数量" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="openDialog(scope.row)">修改</el-button>
					<el-button type="text" size="small" icon="el-icon-delete" @click="deleteCategory(scope.row)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column label="排序" align="center">
				<template slot-scope="scope">
					<div class="btn-sort-wrap">
						<el-button type="text" size="small" icon="el-icon-arrow-up" @click="sort(scope.row, 0)" title="上移"></el-button>
						<el-button type="text" size="small" icon="el-icon-arrow-down" @click="sort(scope.row, 1)" title="下移"></el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 添加及修改类别弹窗 -->
		<el-dialog :title="`${formData.rootDisabled ? '修改' : '添加'}类别`" :visible.sync="dialogVisible" width="30vw">
			<el-form class="category-form">
				<el-form-item label="根类别">
					<el-switch v-model="formData.isRoot" :disabled="formData.rootDisabled"></el-switch>
				</el-form-item>
				<el-form-item v-if="!formData.isRoot">
					<el-select v-model="formData.parentId" placeholder="请选择父类别" style="width: 100%;">
						<el-option v-for="(item, index) in categories" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.name" placeholder="请输入类别名称" maxlength="10"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				categories: [],
				dialogVisible: false,
				loading: false,
				formData: {
					isRoot: false,
					rootDisabled: false,
					parentId: '',
					name: ''
				}
			}
		},
		created() {
			this.findCategories();
		},
		watch: {
			dialogVisible(e) {
				if (!e) {
					for (let key in this.formData) {
						if (typeof this.formData[key] == 'boolean') {
							this.formData[key] = false;
						} else {
							this.formData[key] = '';
						}
					}
				}
			}
		},
		methods: {
			findCategories() {
				this.loading = true;
				this.$util.request('/category', {}, res => {
					this.loading = false;
					this.categories = res.map(e => {
						e.hasChildren = true;
						return e;
					});
				}, true);
			},
			loadChildren(tree, treeNode, resolve) {
				this.$util.request('/category', {
					parentId: tree.id
				}, (res) => {
					resolve(res);
				}, true);
			},
			openDialog(item) {
				if (item) {
					this.categoryId = item.id;
					this.parentId = item.parentId;
					this.formData = {
						rootDisabled: true,
						isRoot: item.parentId == 0,
						name: item.name,
						parentId: item.parentId
					};
				}

				this.dialogVisible = true;
			},
			submit() {
				const {
					isRoot,
					parentId,
					name
				} = this.formData;
				if (!isRoot && !parentId) {
					return this.$util.msg('请选择父类别');
				}
				if (!name) {
					return this.$util.msg('请输入类别名称');
				}

				this.loading = true;
				this.$util.request('/category/' + (this.formData.rootDisabled ? 'update' : 'save'), {
					id: this.categoryId,
					parentId: isRoot ? 0 : parentId,
					name
				}, (res) => {
					this.loading = false;

					if (res.state == 'ok') {
						this.dialogVisible = false;
						this.$message.success('操作成功');

						if (isRoot) {
							this.findCategories();
						} else {
							this.reloadChildren(this.formData.parentId);
							if (this.parentId != this.formData.parentId) {
								this.reloadChildren(this.parentId);
							}
						}
					} else {
						this.$util.msg(res.msg);
					}
				});
			},
			deleteCategory(item) {
				this.$util.requestWithConfirm(`确定删除【${item.name}】吗？`, '/category/delete', {
					id: item.id
				}).then(_ => {
					this.dialogVisible = false;
					
					if (item.parentId == 0) {
						this.findCategories();
					} else {
						this.reloadChildren(item.parentId);
					}
				});
			},
			reloadChildren(parentId) {
				this.loadChildren({
					id: parentId
				}, null, (res) => {
					this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, res);
				});
			},
			sort(item, direction) {
				this.loading = true;
				this.$util.request('/category/sort', {
					id: item.id,
					direction
				}, (res) => {
					this.loading = false;

					if (res.state == 'ok') {
						if (item.parentId == 0) {
							this.findCategories();
						} else {
							this.reloadChildren(item.parentId);
						}
					} else {
						this.$util.msg(res.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.btn-wrap {
		margin-bottom: 20px;
	}

	.btn-sort-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;

		.el-button {
			display: block;
			margin: 0;
			width: 60px;
			height: 30px;
			color: #FFFFFF;
			border: 1px solid $border-color;
			background-color: rgba(0, 0, 0, .4);
		}
	}
</style>
